<template>
	<view class="template-index tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha :isBack="false" :bottomShadow="false">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 图标logo -->
				<view class="custom-nav__back" @click="tn('/homePages/about')">
					<view class="logo-pic tn-shadow-blur" style="background-image: url('/static/tabbar/logo.png')">
						<view class="logo-image"></view>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" @click="tn('/homePages/search')">
					<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230, 230, 230, 0.3)">
						<view class="custom-nav__search__icon tn-icon-search tn-color-white"></view>
						<view class="custom-nav__search__text tn-padding-left-xs tn-color-white">搜索 热门活动</view>
					</view>
				</view>
			</view>
		</tn-nav-bar>

		<swiper class="card-swiper" @click="tn('/homePages/navigation')" :circular="true" :autoplay="true" duration="500" interval="8000" @change="cardSwiper">
			<swiper-item v-for="(item, index) in swiperList" :key="index" :class="cardCur == index ? 'cur' : ''">
				<view class="swiper-item image-banner">
					<image :src="item.bannerUrl" mode="aspectFill"></image>
				</view>
				<view class="swiper-item-text">
					<view class="tn-text-bold tn-color-white" style="font-size: 90rpx">{{ item.title }}</view>
					<!-- <view class="tn-color-white tn-padding-top" style="font-size: 30rpx">{{ item.name }}</view> -->
					<view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">
						{{ item.text }}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="indication">
			<block v-for="(item, index) in swiperList" :key="index">
				<view class="spot" :class="cardCur == index ? 'active' : ''"></view>
			</block>
		</view>

		<!-- banner start-->
		<view class="tn-flex tn-flex-wrap tn-padding-xs" @click="tn('/circlePages/advertise')">
			<view class="" style="padding: 30rpx 30rpx 0 30rpx">
				<!-- 使用组件插槽自定义左侧图片 -->
				<tn-notice-bar :list="listcall" mode="horizontal" :scrollable="true">
					<!-- 插槽名称需参考组件文档，通常为"left-icon"或"prefix" -->
					<template #left-icon>
						<image src="/static/talk.png" mode="widthFix" style="width: 40rpx; height: 40rpx"></image>
					</template>
				</tn-notice-bar>
			</view>
		</view>

		<!-- 方式12 start-->
		<view v-if="isAndroid" class="tn-flex tn-margin-xs tn-padding-top-sm">
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/activityPages/hot_activity')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-team-fill tn-three"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">热门活动</text>
					</view>
				</view>
			</view>
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/activityPages/circle_activity')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-piggy-bank-fill tn-three"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">爱心捐赠</text>
					</view>
				</view>
			</view>
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/homePages/alumni')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-identity-fill tn-three"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">校园卡申领</text>
					</view>
				</view>
			</view>
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/alumn-uncertifiedi')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-my-lack-fill tn-three"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">个人信息</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<!-- 方式12 start-->
		<view v-else class="tn-flex tn-margin-xs tn-padding-top-sm">
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/activityPages/hot_activity')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-team-fill"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">热门活动</text>
					</view>
				</view>
			</view>
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/activityPages/circle_activity')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-piggy-bank-fill"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">爱心捐赠</text>
					</view>
				</view>
			</view>
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/homePages/alumni')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-identity-fill"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">校园卡申领</text>
					</view>
				</view>
			</view>
			<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/website')">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-teal-deep tn-color-gray--light">
						<view class="tn-icon-my-lack-fill"></view>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis">个人信息</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 方式12 end-->

		<!-- banner end-->

		<view class="tn-flex tn-flex-row-between tn-margin-top" @click="tn('/activityPages/business_activity')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">校友名片</view>
			<view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
				<text class="tn-padding-xs">全部</text>
				<text class="tn-icon-topics"></text>
			</view>
		</view>

		<swiper class="card-swiper2 tn-margin-top-sm" :circular="true" :autoplay="false" duration="500" interval="5000" @change="resume">
			<swiper-item
				v-for="(item, index) in resumeList"
				:key="index"
				:class="cardCur2 == index ? 'cur' : ''"
				@click="tn('/circlePages/king')"
			>
				<!-- 轮播背景图：静态默认图 -->
				<view
					class="swiper-item1 image-banner tn-shadow-blur"
					:style="'background-image:url(/static/card2.jpg);width: 660rpx;height: 100%;background-size: cover;border-radius: 15rpx;'"
				></view>
				<!-- 头像：静态默认图 -->
				<!-- 用双引号包裹图片路径，外层用反引号 `` -->
				<view
				  class="swiper-item2 image-banner tn-shadow-blur"
				  :style="`background-image: url(${item.image || '/static/default-avatar.jpg'}); width: 120rpx; height: 120rpx; background-size: cover;`"
				></view>
				<view class="swiper-item-text tn-text-shadow-indigo">
					<view class="tn-text-bold tn-color-black" style="font-size: 45rpx">{{ item.realName }}</view>
					<view class="tn-color-gray--dark tn-padding-top-sm">{{ item.major === 2 ? '计算机科学与技术' : '软件工程' }}</view>
					<view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx">
						<view class="tn-flex-2 tn-padding-sm tn-margin-right">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class="">
									<view class="tn-text-xxl tn-color-green--dark">{{ item.enrollmentYear }}</view>
								</view>
								<view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
									<!-- <text class="tn-icon-fire"></text> -->
									<text class="tn-padding-left-xs">入学年份</text>
								</view>
							</view>
						</view>
						<view class="tn-flex tn-padding-sm tn-margin-left tn-margin-right">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class="">
									<!-- 性别字段转换：数字→文字 -->
									<view class="tn-text-xxl tn-color-orange">{{ item.gender === 1 ? '男' : '女' }}</view>
								</view>
								<view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
									<!-- <text class="tn-icon-share-circle"></text> -->
									<text class="tn-padding-left-xs">性别</text>
								</view>
							</view>
						</view>
						<view class="tn-flex-1 tn-padding-sm tn-margin-left">
							<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
								<view class="">
									<!-- love 字段兼容空值 -->
									<view class="tn-text-xxl tn-color-red">{{ item.phone}}</view>
								</view>
								<view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
									<!-- <text class="tn-icon-like"></text> -->
									<text class="tn-padding-left-xs">联系电话</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="">
			<view class="tn-flex tn-flex-row-between" @click="tn('/activityPages/hot_activity')">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">热门活动</view>
				<view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
					<text class="tn-padding-xs">全部</text>
					<text class="tn-icon-topics"></text>
				</view>
			</view>

			<!-- 热门活动列表 -->
			<view class="news__list tn-margin-left tn-margin-right tn-margin-bottom">
				<block v-for="(item, index) in hotActivities" :key="index">
					<view class="news__item tn-flex" @click="goToActivityDetail(item)">
						<image class="news__item__image" :src="item.coverImage[0]" mode="aspectFill"></image>
						<view class="news__item__content">
							<view class="news__item__title">{{ item.title }}</view>
							<view class="news__item__desc">{{ item.location}}</view>
							<view class="news__item__meta">
								<view>{{ item.startTime }}</view>
								<view class="tn-text-sm tn-text-bold" style="color: #007356">{{ item.status ===0 ?'进行中':'已结束'}}</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="tn-flex tn-flex-row-between tn-margin-top" @click="tn('/homePages/organization')">
				<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">校友协会</view>
				<view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
					<text class="tn-padding-xs">全部</text>
					<text class="tn-icon-topics"></text>
				</view>
			</view>

			<view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
				<block v-for="(item, index) in tuniaoData" :key="index">
					<view
						class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tn-shadow-blur"
						:style="'background-color:' + item.color + ';'"
						@click="tn('')"
					>
						<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
							<view class="tn-info__item__left__content">
								<view class="tn-info__item__left__content--title tn-text-bold" style="font-size: 38rpx">
									{{ item.title }}
								</view>
								<view class="tn-info__item__left__content--data tn-padding-top-xs">
									{{ item.value }}
									<text class="tn-icon-right tn-padding-left-xs"></text>
								</view>
							</view>
						</view>
						<view class="tn-info__item__right">
							<view class="tn-info__item__right--icon">
								<view :class="[`tn-icon-${item.icon}`]"></view>
							</view>
						</view>
						<view class="tn-info__item__bottom">
							<view class="name tn-text-sm tn-color-gray" style="margin-left: -10rpx">
								<text class="tn-icon-code tn-padding-right-xs" style="opacity: 0"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="tn-tabbar-height"></view>
	</view>
</template>

<script>
export default {
	name: 'Index',
	data() {
		return {
			cardCur: 0,
			isAndroid: true,
			swiperList: [],
			cardCur2: 0,
			resumeList: [],
			listcall: ['感谢辽宁市校友会的活动支持！', '吉林市校友会祝语：青春不散场，归来仍少年！', '07生物技术本科班，毕业十三年同学会：时光不老我们不散！'],
			hotActivities: [],
			tuniaoData: [
				{
					title: '吉林市校友会',
					icon: 'image-text-fill',
					color: '#007356',
					value: '前往查看'
				},
				{
					title: '辽宁市校友会',
					icon: 'data-fill',
					color: '#007356',
					value: '前往查看'
				},
				{
					title: '长春市校友会',
					icon: 'statistics-fill',
					color: '#007356',
					value: '前往查看'
				},
				{
					title: '白城市校友会',
					icon: 'bankcard-fill',
					color: '#007356',
					value: '前往查看'
				}
			]
		};
	},
	created() {
		const systemInfo = uni.getSystemInfoSync();
		if (systemInfo.system.toLocaleLowerCase().includes('ios')) {
			this.isAndroid = false;
		} else {
			this.isAndroid = true;
		}
	},
	// onLoad() {
	// 	// console.log('页面 onLoad 触发');
	// 	this.fetchResumeList();
	// 	this.fetchHotActivities();
	// 	this.fetchSwiperList();
	// },
	methods: {
		onTabShow() {
			console.log("加载数据");
			this.page = 1; // 重置页码
			this.fetchResumeList(); // 加载第一页数据
			this.fetchHotActivities();
			this.fetchSwiperList();
		},
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		resume(e) {
			this.cardCur2 = e.detail.current;
		},
		goToActivityDetail(item) {
			uni.navigateTo({
				url: `/preferredPages/activityDetail?id=${item.id}`,
				success: (res) => {
					res.eventChannel.emit('passActivityData', {
						data: item
					});
				}
			});
		},
		tn(e) {
			uni.navigateTo({
				url: e
			});
		},
		fetchResumeList() {
			 console.log('开始加载校友名片数据');
			     uni.showLoading({ title: ' ' });
		
			uni.request({
				url:'http://localhost:8080/api/users/list',
				method: 'GET',
				 data: {
				        pageNum: 1,  // 第1页
				        pageSize: 5  // 每页5条（可根据需求调整）
				      },
				success: (res) => {
					uni.hideLoading();
					 // console.log('后端返回的完整响应：', res); // 打印整个响应对象
					 //  console.log('后端返回的状态码：', res.statusCode); // 应显示200
					 //  console.log('后端返回的data：', res.data); 
					 // 关键1：解析接口返回的 rows 数组（后端数据在rows里，不是直接返回list）
					        if (res.data.code === 200 && res.data.rows) {
					          this.resumeList = res.data.rows;  // 把后端rows赋值给前端列表变量
							   // console.log('前端resumeList赋值后：', this.resumeList); // 确认赋值成功
					        } else {
					          uni.showToast({ title: '数据加载失败', icon: 'none' });
					        }
					      },
				fail: (err) => {
					// 网络错误（如接口地址错误、断网）
					uni.hideLoading();
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
					console.error('请求失败：', err);
				}
			});
		},
		fetchHotActivities() {
			 console.log('开始加载活动数据');
			     uni.showLoading({ title: ' ' });
		
			uni.request({
				url:'http://localhost:8080/api/activities/list',
				method: 'GET',
				 data: {
				        pageNum: 1,  // 第1页
				        pageSize: 4  // 每页5条（可根据需求调整）
				      },
				success: (res) => {
					uni.hideLoading();
					//返回的json数据是在rows中的写res.data.rows反之则是res.data.data
					        if (res.data.code === 200 && res.data.data) {
					          this.hotActivities = res.data.data;
							   // console.log('前端resumeList赋值后：', this.resumeList); // 确认赋值成功
					        } else {
					          uni.showToast({ title: '数据加载失败', icon: 'none' });
					        }
					      },
				fail: (err) => {
					// 网络错误（如接口地址错误、断网）
					uni.hideLoading();
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
					console.error('请求失败：', err);
				}
			});
		},
		fetchSwiperList(){
			console.log('开始加载轮播图');
			     uni.showLoading({ title: ' ' });
					
			uni.request({
				url:'http://localhost:8080/api/banner/list',
				method: 'GET',
				 data: {
				        pageNum: 1,  // 第1页
				        pageSize: 4  // 每页5条（可根据需求调整）
				      },
				success: (res) => {
					uni.hideLoading();
					//返回的json数据是在rows中的写res.data.rows反之则是res.data.data
					        if (res.data.code === 200 && res.data.rows) {
					          this.swiperList = res.data.rows;
							   // console.log('前端resumeList赋值后：', this.resumeList); // 确认赋值成功
					        } else {
					          uni.showToast({ title: '数据加载失败', icon: 'none' });
					        }
					      },
				fail: (err) => {
					// 网络错误（如接口地址错误、断网）
					uni.hideLoading();
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
					console.error('请求失败：', err);
				}
			});
		}
	
	
	
	},
	
};
</script>

<style lang="scss" scoped>
/* 热门活动列表样式 */
.news {
	&__list {
		margin-top: 20rpx;
	}

	&__item {
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		margin-bottom: 25rpx;

		&__image {
			width: 240rpx;
			height: 180rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		&__content {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
		}

		&__title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&__desc {
			font-size: 24rpx;
			color: #666666;
			line-height: 36rpx;
			margin-bottom: 15rpx;
			flex-grow: 1;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		&__meta {
			font-size: 22rpx;
			color: #999999;
			display: flex;
			justify-content: space-between;
		}
	}
}

.template-index {
	max-height: 100vh;
}

.tn-tabbar-height {
	min-height: 100rpx;
	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}

/* 轮播视觉差 start */
.card-swiper {
	height: 540rpx !important;
}

.card-swiper swiper-item {
	width: 750rpx !important;
	left: 0rpx;
	box-sizing: border-box;
	overflow: initial;
}

.card-swiper swiper-item .swiper-item {
	width: 100%;
	display: block;
	height: 100%;
	transform: scale(1);
	transition: all 0.2s ease-in 0s;
	will-change: transform;
	overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
	transform: none;
	transition: all 0.2s ease-in 0s;
	will-change: transform;
}

.card-swiper swiper-item .swiper-item-text {
	margin-top: -320rpx;
	text-align: center;
	width: 100%;
	display: block;
	height: 50%;
	border-radius: 10rpx;
	transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
	transition: all 0.6s ease 0s;
	will-change: transform;
	overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
	margin-top: -320rpx;
	width: 100%;
	transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
	transition: all 0.6s ease 0s;
	will-change: transform;
}

.image-banner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-banner image {
	width: 100%;
	height: 100%;
}

/* 轮播指示点 start*/
.indication {
	z-index: 9999;
	width: 100%;
	height: 36rpx;
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.spot {
	background-color: #ffffff;
	opacity: 0.6;
	width: 10rpx;
	height: 10rpx;
	border-radius: 20rpx;
	top: -60rpx;
	margin: 0 8rpx !important;
	position: relative;
}

.spot.active {
	opacity: 1;
	width: 30rpx;
	background-color: #ffffff;
}

/* 简历推荐 start */
.card-swiper2 {
	height: 420rpx !important;
	overflow: hidden;
}

.card-swiper2 swiper-item {
	width: 680rpx !important;
	left: 30rpx;
	box-sizing: border-box;
	overflow: initial;
	padding: 0 0rpx 40rpx 0;
}

.card-swiper2 swiper-item .swiper-item1 {
	width: 100%;
	display: block;
	height: 100%;
	transform: scale(0.97);
	transition: all 0.2s ease-in 0s;
	will-change: transform;
	background-color: #e7fafe;
}

.card-swiper2 swiper-item.cur .swiper-item1 {
	transform: none;
	transition: all 0.2s ease-in 0s;
	will-change: transform;
}

.card-swiper2 swiper-item .swiper-item2 {
	margin-top: -180rpx;
	width: 100%;
	display: block;
	height: 50%;
	border-radius: 50%;
	transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
	transition: all 0.3s ease 0s;
	will-change: transform;
}

.card-swiper2 swiper-item.cur .swiper-item2 {
	margin-top: -180rpx;
	width: 100%;
	transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
	transition: all 0.3s ease 0s;
	will-change: transform;
}

.card-swiper2 swiper-item .swiper-item-text {
	margin-top: -270rpx;
	width: 100%;
	display: block;
	height: 100%;
	border-radius: 10rpx;
	transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
	transition: all 0.6s ease 0s;
	will-change: transform;
	overflow: hidden;
}

.card-swiper2 swiper-item.cur .swiper-item-text {
	margin-top: -270rpx;
	width: 100%;
	transform: translate(20rpx, 0rpx) scale(0.9, 0.9);
	transition: all 0.6s ease 0s;
	will-change: transform;
}

/* 图标容器12 start */
.tn-three {
	position: absolute;
	top: 50%;
	right: 50%;
	bottom: 50%;
	left: 50%;
	transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
	text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}

.icon12 {
	&__item {
		width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
			}
		}
	}
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;

	&__back {
		margin: auto 5rpx;
		font-size: 40rpx;
		margin-right: 10rpx;
		margin-left: 30rpx;
		flex-basis: 5%;
	}

	&__search {
		flex-basis: 60%;
		width: 100%;
		height: 100%;

		&__box {
			width: 100%;
			height: 70%;
			max-height: 66rpx;
			padding: 10rpx 0;
			margin: 0 30rpx;
			border-radius: 60rpx 60rpx 0 60rpx;
			font-size: 24rpx;
		}

		&__icon {
			padding-right: 10rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
		}

		&__text {
		}
	}
}

.logo-image {
	width: 65rpx;
	height: 65rpx;
	position: relative;
}

.logo-pic {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	border-radius: 50%;
}

/* 业务展示 start */
.tn-info {
	&__container {
		margin-top: 10rpx;
		margin-bottom: 50rpx;
	}

	&__item {
		width: 47.7%;
		margin: 15rpx 0rpx 30rpx 0rpx;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		position: relative;
		z-index: 1;

		&::after {
			content: ' ';
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
			background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
		}

		&__left {
			&__content {
				font-size: 25rpx;

				&--data {
					color: rgba(255, 255, 255, 0.5);
					margin-top: 5rpx;
				}
			}
		}

		&__right {
			&--icon {
				position: absolute;
				right: 0rpx;
				top: 50rpx;
				font-size: 100rpx;
				width: 108rpx;
				height: 108rpx;
				text-align: center;
				line-height: 60rpx;
				opacity: 0.15;
			}
		}

		&__bottom {
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0 0 10rpx 10rpx;
			position: absolute;
			width: 85%;
			line-height: 15rpx;
			left: 50%;
			bottom: -15rpx;
			transform: translateX(-50%);
			z-index: -1;
			text-align: center;
		}
	}
}
</style>
